Ext.ux.Portlet = Ext.extend(Ext.util.Observable, {
	cls: 'panel'
	,titleCls: 'title'
	,bodyCls: 'body'
	,ddGroup: 'column'
	
	,constructor: function(config){
		Ext.apply(this, config);
		Ext.ux.Portlet.superclass.constructor.call(this, config);
		
		this.init();
		this.initDD();
	}
	
	,init: function(){
		if(!this.panel){
			this.panel = new Ext.Element(Ext.DomHelper.createDom({
				cls: this.cls
			}));
			
			this.panel.header = this.panel.createChild({
				cls: this.titleCls	
			});
			
			this.panel.body = this.panel.createChild({
				cls: this.bodyCls	
			});
		}
		
		if(!this.panel.createGhost){
			this.panel.createGhost = function(cls, appendTo){
				var el = document.createElement('div');
				el.className = 'x-panel-ghost ' + (cls ? cls : '');
				if(this.title){
					el.appendChild(this.dom.firstChild.cloneNode(true));
				}
				Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.getHeight());
				el.style.width = this.dom.offsetWidth + 'px';
				if(!appendTo){
					this.container.dom.appendChild(el);
				}else{
					Ext.getDom(appendTo).appendChild(el);
				}
				
				return new Ext.Element(el);
			}	
		}
	}
	
	,initDD: function(){
		if(!Ext.isArray(this.ddGroup)) this.ddGroup = [this.ddGroup];
		
		this.dd = new Ext.ux.Panel.DD(panel, {
			ddGroup: this.ddGroup[0]
			
			,afterDragEnter: function(target, e, id){
				this.proxy.moveProxy(target.el.dom, null);
			}
			
			,afterDragOver: function(target, e, id){
				var items = target.el.select('.panel');
				var gY = this.proxy.getGhost().getY();
				var match = false;
				
				items.each(function(el, c, index){
					var y = el.getY();
					var height = el.getHeight();
					
					if(e.xy[1] >= y && e.xy[1] <= y + height){
						this.pos = gY < y? index + 1 : index;

						this.posEl = items.item(this.pos);
						this.proxy.moveProxy(target.el.dom, this.posEl? this.posEl.dom : null);
						match = true;
						
						return false;
					}
					
				}, this);
				
				if(!match){
					this.pos = 0;
					this.posEl = null;	
				}
			}
			
			,afterDragDrop: function(target, e, id){
				if(!this.posEl) target.el.appendChild(this.panel);
				else this.panel.insertBefore(this.posEl);
			}
		});
	}
});